<template>
  <div class="commonsetting-panel">
    <!-- 消息通知 -->
    <!-- 20200114 子流程需要设置消息通知 -->
    <template v-if="type === 'PARTICIPANT' || type === 'SUB_INSTANCE'">
      <div class="message-notify-box">
        <property-widget label="钉钉通知">
          <div slot="right" class="select-type">
            <a-select
              class="input-select"
              v-model="curActivityProps.todoDataItem.dataItemType"
              @change="changeNotifyType"
            >
              <a-select-option
                v-for="(item, index) in options"
                :key="index"
                :value="item.type"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </div>
        </property-widget>

        <property-widget label="自定义内容" v-show="isShowDataTitle">
          <div slot="right" class="right-box">
            <ellipsis-input :value="messageTxt" @click="showNotifyModal" />
          </div>
        </property-widget>
        <property-widget label="邮件通知">
          <div slot="right" class="right-box">
            <ellipsis-input
              :value="messageTxts"
              @click="handleClickEmailNotify"
            />
          </div>
        </property-widget>
      </div>
    </template>
    <!-- 消息通知弹窗 -->
    <MessageNotify
      v-model="isShowMessageNotify"
      @ok="updateNotify"
      typeStatus="dingtalk"
    />
    <MessageNotify
      v-model="isShowEmailNotify"
      :titleContent="titleContent"
      @ok="updateNotifyEmail"
      typeStatus="email"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { State, Action, namespace } from "vuex-class";
import PropertyWidget from "../base/propertyWidget.vue";
import ellipsisInput from "../base/ellipsisInput.vue";
import { SWTreeGenerator } from "../helper/helper";
/* 弹窗 */
import MessageNotify from "../modals/messageNotify.vue";

const WorkflowModule = namespace("Apps/Workflow");

const AppItemModule = namespace("Apps/AppItem");

const AppCenterModule = namespace("Apps/AppCenter");

enum NotifyType {
  default = 0,
  customerize = 1,
}

@Component({
  name: "Notification",
  components: {
    PropertyWidget,
    ellipsisInput,
    MessageNotify,
  },
})
export default class Notification extends Vue {
  /**
   * 类型，根据不同类型展示不同的的属性
   * 流程属性：'workflow'
   * 连接线：'line'
   * 节点：对应的 activityType
   *  */
  @Prop() type!: any;

  @WorkflowModule.State("curActivityProps") curActivityProps: any;

  @WorkflowModule.Mutation("setPropValue") setPropValue: any;

  @AppCenterModule.Action("getAppList") getAppList: any;

  get messageTxt() {
    // 迭代31
    // 反馈单 通知内容要求清空
    if (Object.keys(this.curActivityProps.todoDataItem).length < 0) return "";

    if (this.curActivityProps.todoDataItem.title) {
      if (this.curActivityProps.todoDataItem.title.length > 0) {
        return "已设置";
      }
    }

    if (this.curActivityProps.todoDataItem.summary) {
      if (this.curActivityProps.todoDataItem.summary.length > 0) {
        return "已设置";
      }
    }
    return "";
  }

  get messageTxts() {
    if (
      this.curActivityProps.todoDataItems &&
      (this.curActivityProps.todoDataItems.length <= 0 ||
        Object.keys(this.curActivityProps.todoDataItems[0]).length < 0)
    )
      return "";
    let val = "";
    this.curActivityProps.todoDataItems.forEach((i) => {
      if (i.belong === "email") {
        if (i.title) {
          if (i.length > 0) {
            val = "已设置";
          }
        }

        if (i.summary) {
          if (i.summary.length > 0) {
            val = "已设置";
          }
        }
      }
    });

    return val;
  }

  options: Array<any> = [
    {
      type: NotifyType.default,
      name: "系统默认通知",
    },
    {
      type: NotifyType.customerize,
      name: "自定义通知",
    },
  ];

  titleContent = {
    title: "邮件通知内容设置",
    emailTitle: "邮件标题",
    emailContent: "邮件内容",
  };

  isShowMessageNotify: boolean = false; // 是否展示消息通知弹窗
  isShowEmailNotify: boolean = false;

  get isShowDataTitle() {
    if (this.curActivityProps.todoDataItem) {
      return (
        this.curActivityProps.todoDataItem.dataItemType ===
        NotifyType.customerize
      );
    }
    return false;
  }

  async mounted() {}

  /**
   * 弹出消息通知弹窗
   */
  showNotifyModal() {
    this.isShowMessageNotify = true;
  }

  handleClickEmailNotify() {
    this.isShowEmailNotify = true;
  }

  /**
   * 更新消息通知数据
   */
  updateNotify(data: any) {
    const { title, summary } = data;
    this.setPropValue({
      key: "todoDataItem.summary",
      value: summary,
    });

    this.setPropValue({
      key: "todoDataItem.title",
      value: title,
    });
    this.handleSelectData(title, summary, "dingtalk", "email");
  }
  /**
   * 更新邮件消息通知数据
   */
  updateNotifyEmail(data: any) {
    const { title, summary } = data;
    this.handleSelectData(title, summary, "email", "dingtalk");
  }
  handleSelectData(title, summary, logo, logos) {
    const value = [{ dataItemType: 1, belong: logo, title, summary }];
    if (this.curActivityProps.todoDataItems && this.curActivityProps.todoDataItems.length > 0) {
      this.curActivityProps.todoDataItems.forEach((v) => {
        if (v.belong === logos) {
          value.push(v);
        }
      });
    }
    this.setPropValue({
      key: "todoDataItems",
      value,
    });
  }
  /**
   * 切换消息通知类型后，
   * 应该清空无效的消息内容
   */
  changeNotifyType(value: any) {
    if (value === NotifyType.customerize) {
      const { summary } = this.curActivityProps.todoDataItem;
      console.log("summary ->", summary);

      if (Array.isArray(summary) && summary.length && !summary[0].code) {
        this.setPropValue({
          key: "todoDataItem.summary",
          value: "",
        });

        this.setPropValue({
          key: "todoDataItem.title",
          value: [],
        });
        if (this.curActivityProps.todoDataItems && this.curActivityProps.todoDataItems.lenght > 0) {
          let val = this.curActivityProps.todoDataItems.filter(
            (v) => v.belong === "email"
          );
          if (!val) {
            val = [
              {
                dataItemType: 1,
                belong: "email",
                summary: [],
                title: [],
              },
            ];
          }
          this.setPropValue({
            key: "todoDataItems",
            value: val,
          });
        }
      }
    } else {
      let val = this.curActivityProps.todoDataItems && this.curActivityProps.todoDataItems.map((v) => {
        if (v.belong === "dingtalk") {
          v.dataItemType = 0;
        }
        return v;
      });
      if (val) {
        this.setPropValue({
          key: "todoDataItems",
          value: val,
        });
      }
    }
  }
}
</script>